<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select: none;
        }
        .box{
            width: 47rem;
            height: 83rem;
        }
        .div1{
            width: 47rem;
            height: 14rem;
            position: relative;
            background-color: rgb(255, 255, 255);
        }
        .d1{
            width: 45rem;
            height: 4rem;
            position: absolute;
            top: 3rem;
            left: 1rem;
            background-color: rgb(227, 227, 229);
            border-radius: 1rem;
            text-align: center;
            line-height: 4rem;
            font-size: 2rem;
        }
        .d10{
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
        }
        .img1{
            width: 2rem;
            height: 2rem;
        }
        .d2{
            width: 45rem;
            height: 3rem;
            position: absolute;
            top: 10rem;
            left: 1rem;
        }
        .d3{
            width: 1rem;
            height: 2rem;
            position: absolute;
            left: 1rem;
            top: 0.5rem;
        }
        .img2{
            width: 1rem;
            height: 2rem;
        }
        .p2{
            width: 13rem;
            height: 2rem;
            position: absolute;
            top: 0;
            left: 16rem;
            color: rgb(139, 138, 138);
            font-size: 2rem;
            text-align: center;
        }
        #p3{
            width: 4rem;
            height: 2rem;
            font-size: 1.5rem;
            color: rgb(136, 136, 136);
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
        }

        .div2{
            width: 47rem;
            height: 63rem;
            background-color: rgb(244,244,244);
        }
        .d9{
            width: 47rem;
            height: 24rem;
            position: relative;
        }
        .img3{
            width: 47rem;
            height: 24rem;
            position: absolute;
            top: 0;
            left: 0;
        }
        .d4{
            width: 11rem;
            height: 11rem;
            position: absolute;
            left: 18rem;
            top: 6rem;
            border-radius: 50%;
        }
        .img4{
            width: 11rem;
            height: 11rem;
        }
        #p4{
            width: 15rem;
            height: 2rem;
            font-size: 2rem;
            text-align: center;
            color: white;
            position: absolute;
            top: 16rem;
            left: 16rem;
        }

        .d12{
            width: 20rem;
            height: 10rem;
            position: absolute;
            bottom: 1rem;
            left: 13.5rem;
            box-shadow: 5rem 5rem 5rem rgb(194, 163, 163);
            border-radius: 1rem;
            text-align: center;
            background-color: rgb(204, 189, 189);
            display: none;
        }
        #i1{
            width: 15rem;
            height: 3rem;
            margin-top: 2rem;
        }
        #btn{
            width: 5rem;
            height: 2rem;
            line-height: 2rem;
            margin-top: 1rem;
        }

        .d5{
            width: 47rem;
            height: 6rem;
            position: relative;
            border-bottom: 0.2rem solid rgb(238, 236, 236);
            background-color: rgb(255, 255, 255);
        }
        .p5{
            width: 8rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            left: 2rem;
            font-size: 1.5rem;
            color: rgb(112, 111, 111);
            font-weight: 800;
        }
        .p6{
            width: 10rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            right: 4rem;
            font-size: 1.2rem;
            color: silver;
            text-align: right;
        }
        .d6{
            width: 1rem;
            height: 2rem;
            position: absolute;
            top: 2rem;
            right: 1.5rem;
        }
        .img5{
            width: 1rem;
            height: 2rem;
        }

        .d7{
            width: 47rem;
            height: 10rem;
            position: relative;
            background-color: rgb(255, 255, 255);
        }
        .d01{
            width: 5rem;
            height: 5rem;
            position: absolute;
            top: 2rem;
            left: 3rem;
            text-align: center;
        }
        .img6{
            width: 3rem;
            height: 3rem;
        }
        .d001{
            width: 5rem;
            height: 2rem;
            font-size: 1.4rem;
            color: rgb(121, 121, 121);
        }
        .d05{
            width: 1.5rem;
            height: 1.5rem;
            background-color: red;
            border-radius: 50%;
            font-size: 1rem;
            line-height: 1.5rem;
            text-align: center;
            position: absolute;
            top: -0.6rem;
            right: 0;
            color: white;
        }
        .d02{
            width: 5rem;
            height: 5rem;
            position: absolute;
            top: 2rem;
            left: 14rem;
            text-align: center;
        }
        .img7{
            width: 3rem;
            height: 3rem;
        }
        .d002{
            width: 5rem;
            height: 2rem;
            font-size: 1.4rem;
            color: rgb(121, 121, 121);
        }
        .d03{
            width: 5rem;
            height: 5rem;
            position: absolute;
            top: 2rem;
            right: 16rem;
            text-align: center;
        }
        .img8{
            width: 3rem;
            height: 3rem;
        }
        .d003{
            width: 5rem;
            height: 2rem;
            font-size: 1.4rem;
            color: rgb(121, 121, 121);
        }
        .d04{
            width: 7rem;
            height: 5rem;
            position: absolute;
            top: 2rem;
            right: 3rem;
            text-align: center;
        }
        .img9{
            width: 3rem;
            height: 3rem;
        }
        .d004{
            width: 7rem;
            height: 2rem;
            font-size: 1.4rem;
            color: rgb(121, 121, 121);
        }

        .d8{
            width: 47rem;
            height: 18rem;
            margin-top: 1rem;
            overflow: hidden;
            background-color: rgb(255, 255, 255);
        }
        .d11{
            width: 45rem;
            height: 5.9rem;
            border-bottom: 0.2rem solid rgb(238, 236, 236);
            margin-left: 2rem;
        }
        .d005{
            width: 10rem;
            height: 2rem;
            font-size: 1.5rem;
            color: rgb(143, 142, 142);
            float: left;
            margin-left: 1rem;
            margin-top: 2rem;
        }
        .d006{
            width: 1rem;
            height: 2rem;
            float: right;
            margin-top: 2rem;
            margin-right: 2rem;
        }
        .img10{
            width: 1rem;
            height: 2rem;
        }

        .footer{
            width: 47rem;
            height: 6rem;
            position: relative;
            background-color: rgb(249, 249, 249);
        }
        #fd1{
            width: 3rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            left: 3rem;
        }
        .fi1{
            width: 3rem;
            height: 3rem;
        }
        .p01{
            width: 3rem;
            height: 2rem;
            text-align: center;
            color: #494949;
            font-size: 1.2rem;
        }
        #fd2{
            width: 3rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            left: 16rem;
        }
        .fi2{
            width: 3rem;
            height: 3rem;
        }
        .p02{
            width: 3rem;
            height: 2rem;
            text-align: center;
            color: #494949;
            font-size: 1.2rem;
        }
        #fd3{
            width: 4rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            right: 15rem;
        }
        .fi3{
            width: 4rem;
            height: 3rem;
        }
        .p03{
            width: 4rem;
            height: 2rem;
            text-align: center;
            color: #494949;
            font-size: 1.2rem;
        }
        #fd4{
            width: 3rem;
            height: 5rem;
            position: absolute;
            top: 1rem;
            right: 3rem;
        }
        .fi4{
            width: 3rem;
            height: 3rem;
        }
        .p04{
            width: 3rem;
            height: 2rem;
            text-align: center;
            color: #fc4040;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="d1">
                    gome.com.cn
                <div class="d10">
                    <img src="img/jian.png" alt="" class="img1">
                </div>
            </div>
            <div class="d2">
                <div class="d3">
                    <img src="img/navleft.png" alt="" class="img2">
                </div>
                <div class="p2">我的酒窖</div>
                <div id="p3">退出</div>
            </div>
        </div>

        <div class="div2">
            <div class="d9">
                <img src="img/bg-1.png" alt="" class="img3">
                <div class="d4">
                    <img src="img/icon.png" alt="" class="img4">
                </div>
                <div id="p4">登录</div>

                <div class="d12">
                    <input type="text" id="i1" placeholder="请输入手机号">
                    <br>
                    <button id="btn">确定</button>
                </div>
            </div>

            <div class="d5">
                <div class="p5">全部订单</div>
                <div class="p6">查看全部订单</div>
                <div class="d6">
                    <img src="img/next.png" alt="" class="img5">
                </div>
            </div>

            <div class="d7">
                <div class="d01">
                    <img src="img/3.png" alt="" class="img6">
                    <div class="d001">待付款</div>
                    <div class="d05">
                        2
                    </div>
                </div>
                <div class="d02">
                    <img src="img/4.png" alt="" class="img7">
                    <div class="d002">待收货</div>
                </div>
                <div class="d03">
                    <img src="img/5.png" alt="" class="img8">
                    <div class="d003">已完成</div>
                </div>
                <div class="d04">
                    <img src="img/6.png" alt="" class="img9">
                    <div class="d004">退款/售后</div>
                </div>
            </div>

            <div class="d8">
                <div class="d11">
                    <div class="d005">收货地址管理</div>
                    <div class="d006">
                        <img src="img/next.png" alt="" class="img10">
                    </div>
                </div>
                <div class="d11">
                    <div class="d005">我的收藏</div>
                    <div class="d006">
                        <img src="img/next.png" alt="" class="img10">
                    </div>
                </div>
                <div class="d11">
                    <div class="d005">联系客服</div>
                    <div class="d006">
                        <img src="img/next.png" alt="" class="img10">
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div id="fd1">
                <img src="img/home.png" alt="" class="fi1">
                <div class="p01">首页</div>
            </div>
            <div id="fd2">
                <img src="img/category-2.png" alt="" class="fi2">
                <div class="p02">分类</div>
            </div>
            <div id="fd3">
                <img src="img/cart.png" alt="" class="fi3">
                <div class="p03">购物车</div>
            </div>
            <div id="fd4">
                <img src="img/mine-2.png" alt="" class="fi4">
                <div class="p04">我的</div>
            </div>
        </div> 
    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

    <script>
        //移动端匹配
        function setHTML() {
            var baseVal = 16;
            var pageWidth = 750;
            var screenWidth = screen.width;
            var fz = screenWidth * baseVal / pageWidth;
            document.querySelector("html").style.fontSize = fz + "px";
        }
        window.onresize = function () {
            setHTML();
        }
        
        var dd = document.getElementsByClassName("d12");

		$("#p4").click(function(){
            if($("#p4").html() == "登录"){
		        $(dd).css("display","block");
		        $("#btn").click(function(){
                        var now = new Date();
                        var day = now.getDate();
                        now.setDate(day+1);	
                        document.cookie="key=" + $("#i1").val() + ";expires="+now ;
                        $("#p4").html(document.cookie.split("=")[1]);
                        $("#p4").html($("#i1").val());
                        $(dd).css("display","none");
		        }
            )}
		})
		$("#p3").click(function(){
				$("#p4").html("登录");
		})
        if(document.cookie.split("=")[1]!=""){
				$("#login").html(document.cookie.split("=")[1]);
			}

        $("#fd1").click(function(){
			window.location.href="首页.html";
		})

        $("#fd3").click(function(){
			window.location.href="购物车.html";
		})

        $("#fd2").click(function(){
			window.location.href="分类.html";
		})

        $(".d3").click(function(){
			window.location.href="首页.html";
		})

        $(".d6").click(function(){
			window.location.href="订单.html";
		})
    </script>
</body>
</html>